// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
    ReactFlow,
    Handle,
    useNodesState,
    useEdgesState,
    addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

// 进度条节点组件
const ProgressNode = ({ data }) => {
    const { progress, label } = data;
    return (
        <div style={{ background: 'lightblue', padding: '10px', borderRadius: '5px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <FontAwesomeIcon icon={faUser} />
                <span style={{ marginLeft: '5px' }}>{label}</span>
            </div>
            <div style={{ marginTop: '10px', background: '#e0e0e0', borderRadius: '5px', overflow: 'hidden' }}>
                <div
                    style={{
                        width: `${progress * 100}%`,
                        height: '20px',
                        background: 'green',
                        borderRadius: '5px',
                    }}
                ></div>
            </div>
        </div>
    );
};

const CustomIconNode = ({ data }) => {
    return (
        <div style={{ background: 'lightblue', padding: '10px', borderRadius: '5px' }}>
            <FontAwesomeIcon icon={faUser} /> {data.label}
        </div>
    );
};

const nodeTypes = {
    customNode: CustomIconNode,
    progressNode: ProgressNode,
};

const progressNode = {
    id: 'progress-node-1',
    type: 'progressNode',
    data: {
        label: 'Progress Node',
        progress: 0.6, // 进度值，范围 0 - 1
        status: 'in-progress', // 节点状态
    },
    position: { x: 600, y: 600 },
};

// 节点配置
const node1 = {
    id: '1',
    type: 'customNode', // 指定自定义类型
    data: { label: 'Font Awesome Node' },
    position: { x: 100, y: 100 }, // 调整到可见位置
};

const initialNodes = [progressNode];
const initialEdges = [];

export default function App() {
    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

    const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <ReactFlow
                nodes={nodes}
                edges={edges}
                nodeTypes={nodeTypes} // 注册自定义类型
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                onConnect={onConnect}
                fitView
            />
        </div>
    );
}    